<template>
	<view class="coffee">
		<view class="con1-title">
			<view class="left">
				咖咖助手

			</view>
			<view class="right">
				<view class="num">
					2
				</view>
				<text>通知</text>
			</view>

		</view>
		<img src="../../static/主题咖.png" alt="">
		<view class="con1">
			<img src="../../static/喇叭.png" alt="">
			<view>
				Tips:如需使用网络及通讯，请在咖助理处开通哦！

			</view>

		</view>
		<view class="con2-title">
			<view class="left">
				咖助理
			</view>
			<view class="right">
				已开通一项
			</view>

		</view>
		<view class="con2">
			<view class="item">
				<img src="../../static/pic1.png" alt="">
				<text>主题官网</text>

			</view>
			<view class="item">
				<img src="../../static/pic2.png" alt="">
				<text>电影票</text>

			</view>
			<view class="item">
				<img src="../../static/pic3.png" alt="">
				<text>咖影院</text>

			</view>
			<view class="item">
				<img src="../../static/pic4.png" alt="">
				<text>通讯</text>

			</view>
			<view class="item">
				<img src="../../static/pic5.png" alt="">
				<text>智能酒店</text>

			</view>


		</view>
		<view class="con2-title">
			<view class="left">
				咖服务
			</view>
		</view>
		<view class="con3">
			<view class="item">
				<img src="../../static/pic4.png" alt="">
				<text>咖档案</text>

			</view>
			<view class="item">
				<img src="../../static/pic3.png" alt="">
				<text>服务</text>

			</view>
			<view class="item">
				<img src="../../static/pic4.png" alt="">
				<text>地图</text>

			</view>
			<view class="item">
				<img src="../../static/pic5.png" alt="">
				<text>日程</text>

			</view>
			<view class="item">
				<img src="../../static/pic6.png" alt="">
				<text>客服</text>

			</view>
			<view class="item">
				<img src="../../static/pic7.png" alt="">
				<text>托运</text>

			</view>
			<view class="item">
				<img src="../../static/pic8.png" alt="">
				<text>幸运咖</text>

			</view>

		</view>
		<view class="con2-title">
			<view class="left">
				咖出行
			</view>
			<view class="right">
				+更多运用
			</view>

		</view>
		<view class="con2">
			<view class="item">
				<img src="../../static/pic6.png" alt="">
				<text>天气</text>

			</view>
			<view class="item">
				<img src="../../static/pic3.png" alt="">
				<text>最近</text>

			</view>


		</view>
		<view class="con2-title">
			<view class="left">
				咖帮手
			</view>


		</view>
		<view class="con2">
			<view class="item">
				<img src="../../static/pic6.png" alt="">
				<text>帮助</text>

			</view>
			<view class="item">
				<img src="../../static/pic3.png" alt="">
				<text>须知</text>

			</view>
			<view class="item">
				<img src="../../static/pic4.png" alt="">
				<text>安全</text>

			</view>

			<view class="item">
				<img src="../../static/pic5.png" alt="">
				<text>神秘功能</text>

			</view>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang='scss'>
	/* vip的样式 */
	.coffee {
		padding: 0rem .5rem;

		.con1-title {
			width: 100%;
			height: 2.5rem;
			/* background-color: pink; */
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {

				font-weight: 600;
				font-size: .9rem;
			}

			.right {
				width: 3.2rem;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					width: 2rem;
					font-size: .8rem;
					font-weight: 600;
				}

				.num {
					margin-right: .2rem;

					color: #fff;
					font-size: .6rem;
					justify-content: center;
					display: flex;
					align-items: center;
					width: 1rem;
					height: 1rem;
					background-color: rgb(240, 89, 84);
					border-radius: 50%;

				}


			}
		}


		img {
			width: 100%;
			height: 7rem;
			margin-right: .5rem;

		}

		.con1 {
			display: flex;
			align-items: center;
			height: 1.5rem;
			/* justify-content: space-between; */
			border-radius: .5rem;
			margin: .6rem 0rem;
			width: 100%;
			background-color: rgb(242, 242, 242);

			img {
				height: 1rem;
				width: 1rem;
			}

			view {
				font-size: .08rem;
				color: #515151;
			}
		}

		.con2-title {
			height: 2.5rem;
			width: 100%;
			/* background-color: pink; */
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				font-weight: 600;
				font-size: .9rem;

			}

			.right {
				width: 4rem;
				font-size: .8rem;
			}
		}

		.con2 {
			height: 4.7rem;
			width: 100%;
			display: flex;
			align-items: center;

			background-color: rgb(242, 242, 242);
			border-radius: .6rem;

			.item {
				width: 20%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				img {
					height: 2.2rem;
					width: 2.2rem;
				}

				text {
					font-size: .7rem;
				}
			}
		}

		.con3 {
			height: 8rem;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			background-color: #f2f2f2;

			border-radius: .6rem;

			.item {
				width: 20%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: .4rem;

				img {
					height: 2.2rem;
					width: 2.2rem;
				}

				text {
					font-size: .7rem;
				}
			}
		}



	}
</style>
